WebCodecs VideoEncoder'i koodeki valik: riistvaralise kodeerija tuvastamine

WebCodecs API pakub võimsat ja paindlikku viisi video kodeerimise ja dekodeerimise haldamiseks otse brauseris. WebCodecs'i tõhusa kasutamise kriitiline aspekt on riistvaraliste kodeerijate mõistmine ja kasutamine. See blogipostitus süveneb VideoEncoder liidese koodekivalikusse, pöörates erilist tähelepanu sellele, kuidas tuvastada ja kasutada riistvaralisi kodeerijaid video kodeerimise jõudluse optimeerimiseks ja kasutajakogemuse parandamiseks üle maailma.

Riistvaraliste kodeerijate olulisuse mõistmine

Riistvaralised kodeerijad, mis on tavaliselt sisseehitatud graafikaprotsessorisse (GPU) või muusse spetsiaalsesse ränikiipi, pakuvad tarkvarapõhiste kodeerijate ees olulisi eeliseid. Need eelised tagavad parema kasutajakogemuse, eriti rakendustes, kus video kodeerimine on ressursimahukas.

• Parem jõudlus: Riistvaralised kodeerijad suudavad videot kodeerida palju kiiremini kui tarkvaralised kodeerijad, mis vähendab latentsust ja tagab sujuvama reaalajas video voogedastuse või töötlemise. See on kriitilise tähtsusega rakenduste jaoks nagu videokonverentsid, otseülekanded ja videotöötlus brauseris.
• Vähendatud protsessori koormus: Kodeerimisprotsessi riistvarale delegeerimine vabastab protsessori, võimaldades brauseril ja veebirakendusel teisi ülesandeid tõhusamalt täita. See aitab kaasa paremale reageerimisvõimele ja süsteemi üldisele jõudlusele, eriti piiratud töötlemisvõimsusega seadmetes, mis on levinud paljudes riikides ja kasutajagruppides.
• Energiatõhusus: Riistvaralised kodeerijad on sageli energiatõhusamad kui tarkvaralised kodeerijad, mis pikendab mobiilseadmete aku kestvust. See on oluline eelis kasutajatele piirkondades, kus on piiratud juurdepääs usaldusväärsele elektrile või neile, kes kasutavad internetiühenduseks peamiselt mobiilseadmeid.
• Parem videokvaliteet (potentsiaalselt): Kuigi see ei ole alati peamine ajend, võivad teatud riistvaralised kodeerijad toetada täpsemaid funktsioone ja pakkuda sama bitikiiruse juures kõrgemat videokvaliteeti võrreldes tarkvaraliste kodeerijatega. See on üha olulisem, kuna ekraanitehnoloogiad arenevad pidevalt erinevatel turgudel.

Saadaolevate koodekite ja riistvaraliste kodeerijate tuvastamine

WebCodecs API pakub mehhanisme kasutaja seadmes saadaolevate koodekite ja riistvaraliste kodeerijate võimekuse määramiseks. See teave on koodekivaliku kohta teadlike otsuste tegemiseks ülioluline.

1. getSupportedCodecs()

VideoEncoder liidesel ei ole getSupportedCodecs() meetodit. Siiski saate seda kasutada MediaCapabilities API kaudu. See on staatiline meetod, mis annab nimekirja toetatud koodekitest ja nende võimekustest. See on peamine meetod, et määrata, milliseid koodekeid kasutaja brauser ja aluseks olev riistvara toetavad. See võtab argumendina võimekuste objekti, mis võimaldab teil määrata piiranguid, nagu soovitud videokoodek (nt 'H.264', 'VP9', 'AV1'), eraldusvõime ja muud parameetrid. Meetod tagastab lubaduse (promise), mis laheneb tõeväärtusega, mis näitab, kas määratud koodekid ja konfiguratsioonid on toetatud.

            
// Näide MediaCapabilities API kasutamisest
async function isCodecSupported(codec, width, height, framerate) {
  try {
    const supported = await navigator.mediaCapabilities.decodingInfo({
      type: 'media',
      video: {
        contentType: 'video/webm; codecs="' + codec + '"',
        width: width,
        height: height,
        frameRate: framerate,
      },
    });
    return supported.supported;
  } catch (error) {
    console.error('Viga koodeki toe kontrollimisel:', error);
    return false;
  }
}

async function determineCodecSupport() {
  const codecOptions = [
    { codec: 'H.264', width: 1280, height: 720, framerate: 30 },
    { codec: 'VP9', width: 1280, height: 720, framerate: 30 },
    { codec: 'AV1', width: 1280, height: 720, framerate: 30 },
  ];

  for (const option of codecOptions) {
    const supported = await isCodecSupported(option.codec, option.width, option.height, option.framerate);
    console.log(`Koodek ${option.codec} on toetatud: ${supported}`);
  }
}

determineCodecSupport();

            

              
                Copy
              
            
          

See näide demonstreerib, kuidas kontrollida H.264, VP9 ja AV1 tuge konkreetsete eraldusvõimete ja kaadrisageduste puhul. Selle kontrolli tulemused peaksid olema suuniseks koodekivalikul teie veebirakenduses.

2. Kodeerimiskonfiguratsiooni hindamine

Kuigi getSupportedCodecs() on äärmiselt kasulik, ei tuvasta see otseselt riistvaraliselt kiirendatud kodeerijaid. Siiski võivad `getSupportedCodecs()` kontrolli tulemused viidata riistvaralise kodeerimise olemasolule. Näiteks kui konkreetne koodek on toetatud kõrge eraldusvõime ja kaadrisagedusega ilma liigse protsessori kasutuseta, on väga tõenäoline, et kasutatakse riistvaralist kodeerijat. Saate seda täiendavalt hinnata, jälgides tegelikku protsessori ja GPU kasutust kodeerimisprotsessi ajal brauseri arendaja tööriistade abil.

3. Brauserispetsiifiline teave (kasutada ettevaatlikult)

Brauserispetsiifilised API-d või lahendused *võivad* pakkuda üksikasjalikumat teavet riistvarakiirenduse kohta, kuid on oluline kasutada neid lähenemisviise ettevaatlikult ning olla teadlik võimalikest ühilduvusprobleemidest ja platvormide erinevustest. Sellise lähenemisviisi kasutamine ei pruugi olla universaalselt toetatud ja seda tuleks kaaluda ainult vajadusel ja põhjaliku testimisega, kuna need võivad ette teatamata muutuda. Näiteks võivad mõned brauserilaiendid ja arendaja tööriistad paljastada üksikasju riistvarakiirenduse kohta.

Koodekivaliku strateegiad

Kui olete kindlaks teinud, milliseid koodekeid kasutaja seade toetab ja millised on riistvaraliste kodeerijate võimalused, saate rakendada strateegilist koodekivaliku protsessi. Eesmärk on valida konkreetse kasutusjuhu jaoks parim koodek, maksimeerides samal ajal riistvarakiirenduse kasutamist.

1. Eelistage riistvaraliselt kiirendatud koodekeid

Esmane eesmärk peaks olema valida koodek, mida toetab riistvaraline kodeerija. Enamikus kaasaegsetes brauserites ja seadmetes on H.264 riistvaraliste kodeerijate poolt laialdaselt toetatud. VP9 on teine tugev kandidaat ja AV1 tugi kasvab kiiresti. Alustage kontrollimisega, kas seade toetab neid koodekeid ja kas riistvarakiirendus on tõenäoliselt saadaval.

2. Arvestage sihtrühmaga

Ideaalne koodekivalik sõltub sihtrühmast. Näiteks:

• Kaasaegsete seadmetega kasutajad: Kui teie sihtrühm kasutab peamiselt kaasaegseid ja ajakohase riistvaraga seadmeid, võite eelistada täiustatumaid koodekeid nagu AV1, kuna need pakuvad paremat tihendustõhusust ja potentsiaalselt paremat kvaliteeti, ehkki suuremate töötlemisnõuetega (mida riistvaralised kodeerijad leevendavad).
• Vanemate seadmetega kasutajad: Vanemate seadmetega kasutajate jaoks võib H.264 olla kõige usaldusväärsem valik, kuna see pakub laialdast ühilduvust ja on sageli hästi toetatud erinevate seadmete riistvaraliste kodeerijate poolt.
• Piiratud ribalaiusega kasutajad: Kui ribalaius on piiranguks, võivad VP9 või AV1 olla kasulikud oma paremate tihendusvõimaluste tõttu, mis võimaldavad madalamaid bitikiiruseid, säilitades samal ajal vastuvõetava videokvaliteedi.
• Globaalsed kaalutlused: Arvestage erinevates piirkondades valdavalt kasutatavate seadmetega. Näiteks mobiilseadmete kasutus ja jõudlusvõimalused varieeruvad riigiti märkimisväärselt. Konsulteerida tuleks andmetega seadmete kasutuse kohta erinevates geograafilistes piirkondades.

3. Adaptiivne bitikiirusega voogedastus

Adaptiivne bitikiirusega voogedastus (ABR) on oluline tehnika optimaalse videokogemuse pakkumiseks erinevates seadmetes ja võrgutingimustes. ABR võimaldab videopleieril dünaamiliselt kohandada videokvaliteeti (ja seega ka koodekit ja kodeerimisseadeid) vastavalt kasutaja ribalaiusele ja seadme võimalustele. See lähenemine on eriti asjakohane globaalses kontekstis, kus interneti kiirused ja seadmete spetsifikatsioonid varieeruvad laialdaselt.

Siin on, kuidas ABR integreerub koodekivaliku ja riistvaralise kodeerija tuvastamisega:

• Mitu kodeerimisprofiili: Kodeerige video mitme bitikiiruse ja eraldusvõimega, kasutades vajadusel igaühe jaoks erinevat koodekit. Näiteks võite luua profiilid H.264, VP9 ja AV1 abil ning erinevate eraldusvõimetega (nt 360p, 720p, 1080p).
• Ribalaiuse tuvastamine: Videopleier jälgib pidevalt kasutaja võrgutingimusi.
• Seadme võimekuse tuvastamine: Videopleier tuvastab kasutaja seadme võimalused, sealhulgas toetatud koodekid ja kõik saadaolevad riistvaralised kodeerijad.
• Profiili vahetamine: Tuvastatud ribalaiuse ja seadme võimaluste põhjal valib videopleier sobiva kodeerimisprofiili. Näiteks kui kasutajal on kiire ühendus ja seade, mis toetab AV1 riistvaralist dekodeerimist, võib pleier valida 1080p AV1 profiili. Kui kasutajal on aeglasem ühendus või vanem seade, võib pleier lülituda madalama eraldusvõimega H.264 profiilile.

4. Tagavaramehhanismid

Tagavaramehhanismide rakendamine on ühtlase kasutajakogemuse tagamiseks ülioluline. Kui riistvaraliselt kiirendatud koodek pole saadaval või kui kodeerimine ebaõnnestub, pakkuge tagavarana tarkvarapõhist kodeerijat või teist koodekit. See võib hõlmata:

• Tarkvaralise kodeerija kasutamine: Kui riistvaraline kodeerimine pole saadaval, saab rakendus lülituda tagasi tarkvaralisele kodeerijale. See suurendab protsessori kasutust, kuid pakub siiski videokogemust. See on eriti oluline vanemate seadmetega kasutajate jaoks.
• Teise koodeki valimine: Kui ühe koodeki kasutamine ebaõnnestub, proovige teist. Näiteks kui AV1 kodeerimine seadmes ebaõnnestub, proovige H.264 või VP9.
• Eraldusvõime või kaadrisageduse vähendamine: Kui ei algne koodek ega tagavarakoodekid pole edukad, saate video eraldusvõimet või kaadrisagedust vähendada, et parandada eduka kodeerimise tõenäosust, eriti kui riistvarakiirendus puudub.

Praktiline rakendamine: WebCodecs ja riistvaralise kodeerija kasutamine

Siin on lihtsustatud näide sellest, kuidas rakendada WebCodecs'i video kodeerimist riistvaralise kodeerija tuvastamise ja valikuga (märkus: see on lihtsustatud näide ja nõuab tootmises robustsemat veakäsitlust ja funktsioonide tuvastamist):

            
// 1. Määrake konfiguratsioon
const config = {
  codec: 'H.264',
  width: 1280,
  height: 720,
  framerate: 30,
  bitrate: 2000000, // 2 Mbps
};

// 2. Abifunktsioon koodeki toe kontrollimiseks
async function isCodecSupported(codec, width, height, framerate) {
  try {
    const supported = await navigator.mediaCapabilities.decodingInfo({
      type: 'media',
      video: {
        contentType: 'video/webm; codecs="' + codec + '"',
        width: width,
        height: height,
        frameRate: framerate,
      },
    });
    return supported.supported;
  } catch (error) {
    console.error('Viga koodeki toe kontrollimisel:', error);
    return false;
  }
}

// 3. Initsialiseerige VideoEncoder
let videoEncoder;
async function initializeEncoder() {
  if (!await isCodecSupported(config.codec, config.width, config.height, config.framerate)) {
    console.warn(`Koodek ${config.codec} ei ole toetatud. Proovitakse tagavarale lülituda.`);
    // Rakendage siin koodeki tagavaramehhanism
    config.codec = 'VP9';  // Tagavara näide
    if (!await isCodecSupported(config.codec, config.width, config.height, config.framerate)) {
      console.error('Sobivat koodekit ei leitud.');
      return;
    }
    console.log(`Lülitutakse tagavarakoodekile ${config.codec}`);
  }

  try {
    videoEncoder = new VideoEncoder({
      output: (chunk, meta) => {
        // Käsitsege kodeeritud andmeid (nt saatke serverisse, salvestage faili)
        console.log('Kodeeritud tükk:', chunk, meta);
      },
      error: (e) => {
        console.error('VideoEncoderi viga:', e);
      },
    });

    videoEncoder.configure({
      codec: config.codec,
      width: config.width,
      height: config.height,
      framerate: config.framerate,
      bitrate: config.bitrate,
    });

    console.log('VideoEncoder on konfigureeritud.');
  } catch (err) {
    console.error('VideoEncoderi initsialiseerimise viga:', err);
  }
}


// 4. Videokaadri kodeerimine
async function encodeFrame(frame) {
  if (!videoEncoder) {
    console.warn('VideoEncoder ei ole initsialiseeritud.');
    return;
  }

  try {
    videoEncoder.encode(frame, { keyFrame: true }); // Või false mitte-võtmekaadrite jaoks
    frame.close(); // Sulgege kaader pärast kodeerimist
  } catch (err) {
    console.error('Kodeerimise viga:', err);
  }
}

// 5. Puhastamine (oluline!)
function closeEncoder() {
  if (videoEncoder) {
    videoEncoder.flush(); // Tühjendage kõik järelejäänud kodeeritud andmed
    videoEncoder.close();
    videoEncoder = null;
    console.log('VideoEncoder on suletud.');
  }
}

// Kasutusnäide:
async function startEncoding() {
  await initializeEncoder();
  // Simuleerige videokaadri saamist
  if (videoEncoder) {
    const canvas = document.createElement('canvas');
    canvas.width = config.width;
    canvas.height = config.height;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'green';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    const frame = new VideoFrame(canvas, { timestamp: 0 });
    encodeFrame(frame);

    setTimeout(() => {
      closeEncoder();
    }, 5000);
  }
}

startEncoding();

            

              
                Copy
              
            
          

Selles näites on kaasatud järgmised sammud:

• Konfiguratsioon: Määratleb soovitud koodeki, eraldusvõime ja muud parameetrid.
• Koodeki toe kontroll: Kasutab funktsiooni isCodecSupported(), et kontrollida, kas valitud koodek on toetatud, ja seda saab kohandada riistvaralise kodeerija tuvastamiseks.
• Kodeerija initsialiseerimine: Loob VideoEncoder'i eksemplari määratud konfiguratsiooniga. Sisaldab veakäsitlust.
• Kaadri kodeerimine: Kodeerib ühe VideoFrame'i. Pange tähele, et see eeldab, et teil on VideoFrame objekt, mille saate tavaliselt MediaStreamTrack'ist getUserMedia() kutse kaudu.
• Kodeerimistsükkel (siin pole näidatud): Reaalses rakenduses integreeriksite funktsiooni encodeFrame() tsüklisse, töödeldes iga kaadrit videoallikast.
• Puhastamine: Korralikud close() ja flush() kutsed on mälulekete vältimiseks ja kõigi kodeeritud andmete töötlemise tagamiseks üliolulised.

Olulised kaalutlused:

• Veakäsitlus: Rakendage robustne veakäsitlus, et graatsiliselt hallata võimalikke probleeme, nagu toetamata koodekid, riistvaralise kodeerija rikked või võrguprobleemid.
• Funktsioonide tuvastamine: Enne WebCodecs API kasutamist kontrollige alati selle saadavust funktsioonide tuvastamise abil (nt typeof VideoEncoder !== 'undefined').
• Brauseri ühilduvus: Testige põhjalikult erinevates brauserites (Chrome, Firefox, Safari, Edge) ja nende versioonides. Pöörake erilist tähelepanu brauserispetsiifilistele rakendustele ja võimalikele jõudluse variatsioonidele.
• Kasutaja load: Olge teadlik kasutaja lubadest, eriti videoallikatele (nt kaamerale) juurdepääsemisel.

Põhilisest koodekivalikust kaugemale: jõudluse optimeerimine

Tõhus koodekivalik on vaid üks osa WebCodecs'il põhinevate videorakenduste optimeerimisest. Mitmed täiendavad tehnikad võivad jõudlust ja üldist kasutajakogemust veelgi parandada.

1. Kaadrisageduse haldamine

Kaadrisagedus mõjutab oluliselt ribalaiuse kasutust ja töötlemisnõudeid. Kaadrisageduse dünaamiline kohandamine vastavalt võrgutingimustele ja seadme võimalustele on ülioluline. Kaaluge neid strateegiaid:

• Kohandage kaadrisagedust: Rakendage loogika kaadrisageduse vähendamiseks suure võrgukoormuse perioodidel või piiratud töötlemisvõimsusega seadmetes.
• Kasutage võtmekaadreid strateegiliselt: Suurendage võtmekaadrite sagedust, et parandada otsimisjõudlust ja pakkuda paremat taastumist paketikaost. Siiski võivad sagedased võtmekaadrid suurendada ribalaiust.

2. Eraldusvõime skaleerimine

Video kodeerimine sobiva eraldusvõimega on hädavajalik. Video eraldusvõime dünaamiline skaleerimine, eriti vastavalt seadme ekraani suurusele ja võrgutingimustele, on võtmetehnika.

• Kohandage ekraani suurusega: Kodeerige video eraldusvõimega, mis vastab kasutaja ekraani suurusele, või skaleerige videovoogu vastavalt.
• Dünaamiline eraldusvõime vahetamine: Kui ribalaius on piiratud, lülituge madalamale eraldusvõimele. Vastupidi, kui ribalaius on piisav, lülituge kõrgemale eraldusvõimele.

3. Töötajate lõimed (Worker Threads)

Selleks, et vältida peamise lõime blokeerimist kodeerimisprotsessi poolt, mis võib viia kasutajaliidese hangumiseni, kaaluge Web Workerite kasutamist. Viige kodeerimisoperatsioonid eraldi töötaja lõimele. See tagab, et peamine lõim jääb reageerimisvõimeliseks ja võimaldab kasutajal rakendusega katkestusteta suhelda.

4. Tõhus andmekäsitlus

Käsitlege kodeeritud videoandmeid tõhusalt. See hõlmab järgmist:

• Tükeldamine: Jagage kodeeritud video väiksemateks tükkideks tõhusaks edastamiseks üle võrgu.
• Puhverdamine: Rakendage puhverdamist, et leevendada võrgu värina ja paketikaotuse mõjusid.
• Tihendamine: Kasutage tihendustehnikaid (nt gzip) kodeeritud videoandmetel enne edastamist, et vähendada ribalaiuse tarbimist.

5. Profileerimine ja jälgimine

Profileerige ja jälgige pidevalt oma WebCodecs'i rakenduse jõudlust. Kasutage brauseri arendaja tööriistu, et tuvastada kitsaskohti ja parendusvaldkondi. Jälgige olulisi näitajaid nagu protsessori kasutus, mälutarve, kodeerimisaeg ja ribalaiuse kasutus. Jõudluse jälgimine võimaldab andmepõhiseid optimeerimisi. Selleks on olemas järgmised tööriistad:

• Brauseri arendaja tööriistad: Kasutage brauseri arendaja tööriistu rakenduse profileerimiseks ja jõudluse kitsaskohtade tuvastamiseks.
• Jõudluse jälgimise tööriistad: Integreerige kolmandate osapoolte jõudluse jälgimise tööriistu, et jälgida olulisi näitajaid, nagu protsessori kasutus, mälutarve, kodeerimisaeg ja ribalaiuse kasutus.
• Reaalsete kasutajate jälgimine (RUM): Rakendage reaalsete kasutajate jälgimist, et koguda jõudlusandmeid tegelikelt kasutajatelt, pakkudes ülevaadet sellest, kuidas teie rakendus toimib reaalsetes tingimustes erinevates seadmetes ja võrkudes.

Kokkuvõte: WebCodecs'i ja riistvaraliste kodeerijate võimsuse omaksvõtmine

WebCodecs API koos riistvaraliste kodeerijate strateegilise kasutamisega pakub võimsat tööriistakomplekti suure jõudlusega videorakenduste loomiseks brauseris. Valides hoolikalt koodekeid, arvestades riistvaraliste kodeerijate võimekust ning rakendades adaptiivset bitikiirusega voogedastust ja muid optimeerimistehnikaid, saate pakkuda ülemaailmsetele kasutajatele suurepärast videokogemust. Riistvaralise kodeerija tuvastamise, koodekivaliku ja jõudluse optimeerimise nüansside mõistmine on veebiarendajatele, kes soovivad luua kaasahaaravaid ja tõhusaid videopõhiseid rakendusi, ülioluline.

Veeb on globaalne platvorm ning võime kohaneda erinevate kasutajaseadmete ja võrgutingimustega on ülimalt tähtis. Võttes omaks WebCodecs'i ja riistvaralised kodeerijad, saavad arendajad avada uusi võimalusi reaalajas videosuhtluseks, video voogedastuseks ja rikkalikeks multimeediumikogemusteks, teenindades mitmekesist rahvusvahelist publikut. Hoidke end kursis viimaste arengutega WebCodecs API brauseritoes ning testige oma rakendusi erinevates seadmetes ja võrgutingimustes, et tagada optimaalne jõudlus ja sujuv kasutajakogemus.